<template>
  <Card style="width:100%" class="detail-content-layout mb16">
    <template #title>
      {{$t('签署合同')}}
    </template>
    <template #extra>
      <div class="h-arrow-wrap" @click="toggle = !toggle">
        <i :class="{toggleActive:toggle}" class="iconfont zy-common-jiantou h-arrow-icon"></i>
      </div>
    </template>
    <transition name="slide-up">
      <div v-if="toggle">
        <Form ref="form" :model="form" :rules="rules" label-position="top">
          <Row :gutter="24">
            <Col span="6">
              <FormItem :label="$t('KONE-合同号')" prop="csoffContractNo">
                <Input maxlength="200" :disabled="disabled" clearable type="text" v-model="form.csoffContractNo" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
            <Col span="6" class="autoHeight">
              <FormItem :label="$t('已签署的合同')" prop="contractSignoffs">
                <uploadFile accept=".pdf,.eml" key="52" :fileList="info.contractSignoffs" :disabled="disabled"
                            @change="(list)=>{form.contractSignoffs = list}"/>
              </FormItem>
            </Col>
            <Col span="6" style="height: 79px">
              <FormItem :label="$t('需要SAT')" prop="satIsRequired">
                <RadioGroup v-model="form.satIsRequired" :disabled="disabled">
                    <Radio :disabled="disabled" :label=1>{{$t('是')}}</Radio>
                  <Radio :disabled="disabled" :label=0>{{$t('否')}}</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="6" style="height: 79px">
              <FormItem :label="$t('CAT前的第二次付款')" prop="twoPaymentBeforeCat">
                <RadioGroup v-model="form.twoPaymentBeforeCat" :disabled="disabled">
                  <Radio :disabled="disabled" :label=1>{{$t('是')}}</Radio>
                  <Radio :disabled="disabled" :label=0>{{$t('否')}}</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem :label="$t('备注')">
                <Input maxlength="200" :disabled="disabled" clearable type="text" v-model="form.remark" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem  :label="$t('提交人')"  v-if="disabled">
                <Input disabled clearable type="text" v-model="form.submitByStr" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
            <Col span="6" v-if="disabled">
              <FormItem :label="$t('提交时间')">
                <Input disabled clearable type="text" v-model="form.submitTime" :placeholder="$t('请输入')" ></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <rejectInfo :rejectFlows="rejectFlows"/>
        <contractSignOffTab ref="contractSignOffTab"  :satIsRequired.sync="form.satIsRequired" :primevalList="csDetails" :disabled="disabled"/>
      </div>
    </transition>
  </Card>
</template>

<script>
import uploadFile from "@/views/devBasic/capex/components/uploadFile";
import mixins from "@/views/devBasic/capex/components/mixins";
import rejectInfo from "@/views/devBasic/capex/components/rejectInfo";
import contractSignOffTab from "@/views/devBasic/capex/components/contractSignOffTab";
export default {
  name: "contractSignOff",
  components:{uploadFile,rejectInfo,contractSignOffTab},
  mixins:[mixins],
  props: {
    info: {
      type: Object,
      default: ()=> {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    approvalInfo:{
      type: Object,
      default: ()=> {}
    },
    rejectFlows: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    const validateFile = (rule, value, callback) => {
      if (!(Array.isArray(this.form.contractSignoffs) && this.form.contractSignoffs.length > 0)) {
        callback(new Error(this.$t('请上传附件')));
      } else {
        callback();
      }
    };
    return {
      toggle: true,
      form:{
        csoffContractNo:"",
        satIsRequired:1,
        twoPaymentBeforeCat:1
      },
      rules:{
        contractSignoffs: [{ required:true, validator: validateFile, trigger: 'change'}],
        csoffContractNo:[{required: true, type: "string", message: this.$t('请输入'), trigger: 'change'}],
        twoPaymentBeforeCat: [{required: true, type: "number", message: this.$t('请选择'), trigger: 'change'}],
        satIsRequired: [{required: true, type: "number", message: this.$t('请选择'), trigger: 'change'}],
      },
      csDetails:[]
    }
  },
  created() {
    this.form.submitByStr = this.userName;
    if (this.info.csoffContractNo)
      this.setParams()
    if (this.disabled) {
      // this.setParams()
      this.toggle = false
    }else if (this.rejectFlows && this.rejectFlows.approvalRemark){
      // this.setParams()
      this.toggle = true
    }
  },
  methods:{
    setParams(){
      const {submitTime,submitRemark,submitByStr} = this.approvalInfo
      const {contractSignoffs,csoffContractNo,csDetails,satIsRequired,twoPaymentBeforeCat} = this.info;
      this.form = Object.assign(this.form, {
        remark:submitRemark,
        submitTime,
        submitByStr,
        contractSignoffs,
        csoffContractNo,
        satIsRequired,
        twoPaymentBeforeCat
      })
      this.csDetails = csDetails
      this.$forceUpdate()
    },
    async getParams(status) {
      const valid = status ? status :await this.$refs.form.validate()
      if (valid) {
        const list = this.$refs.contractSignOffTab.getParams()
        // const arr = list.filter(item=> item.processCode== 1 ||  item.processCode== 2 ||  item.processCode== 3)
        // if (arr.length < 3){
        //   this.$Message.error('每个TAB至少一条数据')
        //   return false;
        // }
        if (list.find(item=> item.edit)){
          this.$Message.error(this.$t('请先保存'))
          return false;
        }

        return {
          ...this.form,
          csDetails:list
        }
      }else{
        return  false
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "./style";
</style>

